<template>
  <div class="project-task-tree">
    <div class="tree-container">
      <a-tree
      :tree-data="treeData"
      defaultExpandAll
      @select="onSelect"
      block-node
      >
      <!-- 自定义节点标题 -->

    </a-tree>

    </div>

    <div v-if="selected" class="detail-grid">
      <!-- 第一行：日期(4-8/24), 状态(4-8/24) -->
      <a-row class="detail-row">
        <a-col :span="4" class="detail-label">日期</a-col>
        <a-col :span="8" class="detail-value">{{ selected.date }}</a-col>

        <a-col :span="4" class="detail-label">状态</a-col>
        <a-col :span="8" class="detail-value">{{ selected.type }}</a-col>

      </a-row>
      <!-- 第二行：参与人(4-8/24) -->
      <a-row class="detail-row">
        <a-col :span="4" class="detail-label">项目经理</a-col>
        <a-col :span="8" class="detail-value">{{managerLabel }}</a-col>

        <a-col :span="4" class="detail-label">参与人</a-col>
        <a-col :span="8" class="detail-value">{{ memberLabels }}</a-col>

      </a-row>
      <!-- 第三行：四个时间字段，每个 4-8/24 -->
      <a-row class="detail-row">
        <a-col :span="4" class="detail-label">预计开始时间</a-col>
        <a-col :span="8" class="detail-value">{{ selected.estimatedStartTime }}</a-col>

        <a-col :span="4" class="detail-label">预计结束时间</a-col>
        <a-col :span="8" class="detail-value">{{ selected.estimatedEndTime }}</a-col>
      </a-row>
      <a-row class="detail-row">
        <a-col :span="4" class="detail-label">实际开始时间</a-col>
        <a-col :span="8" class="detail-value">{{ selected.actualStartTime }}</a-col>

        <a-col :span="4" class="detail-label">实际结束时间</a-col>
        <a-col :span="8" class="detail-value">{{ selected.actualEndTime }}</a-col>
      </a-row>

      <!-- 第四行：内容，跨满全宽（24/24） -->
      <a-row class="detail-row content-row">
        <a-col :span="24" class="detail-label">主要内容</a-col>
        <a-col :span="24" class="detail-value content-value">
          {{ selected.content }}
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue'
import {  Tooltip } from 'ant-design-vue'
import type { TreeProps } from 'ant-design-vue'
import { useTodoStore, type TodoItem } from '@/stores/todo'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

// 用户选项（静态示例数据，可以替换为 API 获取）
const userOptions = [
  { label: '张三', value: 'zhangsan' },
  { label: '李四', value: 'lisi' },
  { label: '王五', value: 'wangwu' },
  { label: '赵六', value: 'zhaoliu' },
  { label: '小明', value: 'xiaoming' },
  { label: '小红', value: 'xiaohong' },
  { label: '小刚', value: 'xiaogang' },
  { label: '小丽', value: 'xiaoli' },
  { label: '小华', value: 'xiaohua' },
]

// 动态数据
const todoStore = useTodoStore()
const selected = ref<TodoItem | null>(null)

// 构造 “项目 → 任务” 树：以 projectName 作为项目分组
// const treeData = computed<TreeProps[]>(() => {
//   const map = new Map<string, TodoItem[]>()
//   todoStore.todos.forEach((item) => {
//     const proj = item.projectName || '未分类项目'
//     if (!map.has(proj)) map.set(proj, [])
//     map.get(proj)!.push(item)
//   })

//   return Array.from(map.entries()).map(([projectName, items]) => ({
//     title: projectName,               // ← 一级节点标题改为项目名
//     key: `proj-${projectName}`,       // ← 一级节点 key 改为项目前缀 + 名称，保证唯一
//     selectable: false,
//     hasConflict: items.some(i => i.conflictSign),    // 标记是否有冲突
//     children: items.map((i) => ({
//       title: i.taskName,         // 叶子节点显示任务名称
//       key: `task-${i.id}`,            // 叶子节点 key 保持原 id 加前缀
//       isLeaf: true,
//       dataRef: i,
//     })),
//   }))
// })

const treeData = computed<TreeProps[]>(() => {
  const map = new Map<string, TodoItem[]>()
  todoStore.todos.forEach(item => {
    const proj = item.projectName || '未分类'
    if (!map.has(proj)) map.set(proj, [])
    map.get(proj)!.push(item)
  })

  return Array.from(map.entries()).map(([projectName, items]) => {
    const hasConflict = items.some(i => i.conflictSign)

    return {
      // 直接用函数生成带图标的 VNode 作为节点标题
      title: () =>
        h(
          'span',
          {},
          [
            projectName,
            hasConflict
              ? h(
                  Tooltip,
                  { title: '该项目中存在时间冲突的任务', placement: 'top' },
                  {
                    default: () =>
                      h(ExclamationCircleOutlined, {
                        twoToneColor: '#faad14',
                        style: { marginLeft: '4px' },
                      }),
                  }
                )
              : null,
          ].filter(Boolean)
        ),

      key: `proj-${projectName}`,
      selectable: false,
      children: items.map(i => ({
        // 叶子节点只返回文本
        title: () => h('span', {}, i.taskName),
        key: `task-${i.id}`,
        isLeaf: true,
        dataRef: i,
      })),
    }
  })
})

// 新增：根据代码 value 查 label
const managerLabel = computed(() => {
  if (!selected.value?.projectManager) return ''
  const opt = userOptions.find(u => u.value === selected.value!.projectManager)
  return opt ? opt.label : selected.value.projectManager
})

const memberLabels = computed(() => {
  if (!selected.value?.members) return ''
  return selected.value.members
    .map(v => {
      const opt = userOptions.find(u => u.value === v)
      return opt ? opt.label : v
    })
    .join(', ')
})

function onSelect(_: any, { node }: { node: any }) {
  const d = node.dataRef as TodoItem
  selected.value = d.id != null ? d : null
}
// // 拼接日期时间
// function formatDateTime (date:string,time:string) {
//   return `${date} ${time}`
// }


// // 静态数据
// const treeData = ref<[TreeProps]>([
//   {
//     title: '项目名称1',
//     key: '2025-05-18',
//     selectable: false,
//     children: [
//       {
//         title: '任务1：设计页面 UI',
//         key: 'task-1',
//         isLeaf: true,
//         dataRef: {
//           id: 'task-1',
//           date: '2025-05-18',
//           participant:'张三',
//           estimatedstarttime: '10:00',
//           estimatedendtime: '12:00',
//           actualstarttime: '10:30',
//           actualendtime: '12:30',
//           content: '设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI',
//           type: '完成'
//         }
//       },
//       {
//         title: '任务2：接口联调',
//         key: 'task-2',
//         isLeaf: true,
//         dataRef: {
//           id: 'task-2',
//           date: '2025-05-18',
//           participant:'张三',
//           estimatedstarttime: '10:00',
//           estimatedendtime: '12:00',
//           actualstarttime: '10:30',
//           actualendtime: '12:30',
//           content: '设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI设计页面 UI',
//           type: '完成'
//         }
//       }
//     ]
//   },
//   {
//     title: '2025-05-19',
//     key: '2025-05-19',
//     selectable: false,
//     children: [
//       {
//         title: '测试功能',
//         key: 'task-3',
//         isLeaf: true,
//         dataRef: {
//           id: 'task-3',
//           date: '2025-05-19',
//           participant:'李四',
//           estimatedstarttime: '09:00',
//           estimatedendtime: '11:00',
//           actualstarttime: '09:30',
//           actualendtime: '11:30',
//           content: '测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能',
//           type: '完成'
//         }
//       }
//     ]
//   },
//   {
//     title: '2025-05-19',
//     key: '2025-05-19',
//     selectable: false,
//     children: [
//       {
//         title: '测试功能',
//         key: 'task-3',
//         isLeaf: true,
//         dataRef: {
//           id: 'task-3',
//           date: '2025-05-19',
//           participant:'李四',
//           estimatedstarttime: '09:00',
//           estimatedendtime: '11:00',
//           actualstarttime: '09:30',
//           actualendtime: '11:30',
//           content: '测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能测试功能',
//           type: '完成'
//         }
//       }
//     ]
//   }
// ])
// const selected = ref<TodoItem | any>(null)

// function onSelect(_: any, info: { node: any }) {
//   const { node } = info
//   if (!node.isLeaf) {
//     selected.value = null
//     return
//   }
//   const data = node.dataRef as TodoItem
//   if (node.dataRef) {
//     if (selected.value && selected.value.id === data.id) {
//       selected.value = null
//     } else {
//       selected.value = data
//     }
//   }
// }

</script>

<style scoped lang="less">
:deep(.main-content) {
  display: flex;
  justify-content: flex-start;

}
.project-task-tree {
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  width: 800px;
  height: 100%;
}
.tree-container {
  height: 300px;       /* ← 固定高度 */
  overflow: auto;      /* ← 启用滚动 */
  border-bottom: 1px solid #ddd;
  width: 100%;
}

/* 详情区域的栅格布局 */
.detail-grid {
  flex: 1;                /* 占满除 tree-container 之外的所有高度 */
  width: 100%;
  overflow-y: auto;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* 每行固定高度 */
.detail-row {
  display: flex;
  align-items: center;
  padding-left: 10px ;
  margin-bottom: 8px;
  border: 0.2px solid #3f3838;
  .detail-label {
    font-weight: bold;
    text-align: left;
    padding-right: 8px;
    box-sizing: border-box;
  }
  .detail-value {
    text-align: left;
    padding-left: 8px;
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* 内容行，自适应高度向下扩展 */
.content-row .detail-value {
  height: auto;
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
}
</style>
